/* eslint-disable no-nested-ternary */
import React, { FC } from 'react';
import { Card, Icon } from 'choerodon-ui';
import styles from './style.less';
import Icon1 from '../assets/chart.svg';

interface MainCardProps {
  color?: string;
  title?: string;
  number?: number | string;
  total?: number;
  desc?: string;
  status?: string;
  percent?: string;
}

const MainCard: FC<MainCardProps> = props => {
  const { color, title, number, total, desc, status, percent } = props;
  return (
    <Card bordered={false}>
      <div className={styles['today-output']}>
        <div className={styles['left-icon']} style={{ background: color }}>
          <img src={Icon1} alt="" />
        </div>
        <div className={styles['middle-desc']}>
          <div className={styles.title}>{title}</div>
          <div className={styles.output}>
            <span className={styles['left-output']}>{number}</span>
            {total && <span className={styles['right-output']}>/{total}</span>}
          </div>
        </div>
        <div className={styles['right-desc']}>
          <div className={styles.degree} style={{ color }}>
            {status === 'up' ? (
              <Icon type="arrow_drop_up" style={{ color: '#39C878', transform: 'scale(1.4)' }} />
            ) : status === 'down' ? (
              <Icon type="arrow_drop_down" style={{ color: '#FD6868', transform: 'scale(1.4)' }} />
            ) : null}
            {percent || <div className={styles.degree}>&nbsp;</div>}
          </div>
          <div className={styles['today-degree']}>{desc}</div>
        </div>
      </div>
    </Card>
  );
};

export default MainCard;
